<!-- SeatInfoItem -->
<template>
  <view class="vm">
    <view
      v-if="!seatPieceName"
      @click.stop="handleClick"
      class="indexTxt SeatInfoItem"
      :style="{
        'min-width': limit > 4 ? '140rpx' : itemWidth
      }"
      >{{ index }}人</view
    >
    <view v-if="seatPieceName" class="flex flex-b flex-m SeatInfoItem">
      <view class="">
        <view class="seatPieceName fc8">{{ seatPieceName }}</view>
        <text class="price">¥{{ price }}<text>起</text></text>
      </view>
      <!-- #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO-->
      <view class="icon-cross" @click.stop="close">
        <u-icon class="icon-cross" name="close" />
      </view>

      <!-- #endif-->
      <!-- #ifdef H5   -->
      <u-icon @click.native.stop="close" class="icon-cross" name="close" />
      <!-- #endif-->
    </view>
  </view>
</template>

<script>
  export default {
    name: 'SeatInfoItem',
    props: {
      hasCommercePrice: Boolean,
      index: [String, Number],
      price: [String, Number],
      limit: [String, Number],
      minPrice: [String, Number],
      seatPieceName: String
    },
    created() {
      this.itemWidth = ((uni.getSystemInfoSync().windowWidth - 30 - 30) / 4) * 2 + 'rpx'
      console.log(this.itemWidth, uni.getSystemInfoSync().windowWidth, 'this.itemWidth')
    },
    data() {
      return {
        itemWidth: '160rpx'
      }
    },
    methods: {
      // 初始化方法
      close() {
        this.$emit('close')
      },
      handleClick() {
        this.$emit('select', this.index)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .SeatInfoItem {
    margin-right: 20rpx;
    // min-width: 160rpx;
    height: 80rpx;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    font-size: 22rpx;
    border-radius: 10rpx;
    padding: 0 10rpx;
  }
  .indexTxt {
    height: 100%;
    text-align: center;
    line-height: 80rpx;
  }
  .seatPieceName {
    font-size: 22rpx;
    // #ifdef MP-TOUTIAO
    white-space: nowrap;
    // #endif
    // color: #000;
  }
  .price {
    font-size: 22rpx;
    color: $yellow;
  }

  .icon-cross {
    color: #c5c3cf;
  }
  .seatDisplay {
    /* #ifdef H5 */
    display: inline-table;
    /* #endif */
  }
</style>
